<template>
    <div>
        <span v-if="parameter.status==='1'">数值下拉</span>
        <el-select v-model="selectedValue" size="mini"
                   multiple placeholder="请选择" :style="parameter.status==='1'? '' :'width:100%'">
            <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
            <i v-if="nextPage"
               class="el-icon-circle-plus-outline"
               @click="handleClick" style="padding-left: 20px">加载更多</i>
        </el-select>
        <el-button v-if="parameter.status==='1'" size="mini" @click="confirm">确定</el-button>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确认修改信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmModification">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import {
        GET_TABLEFILTER_INFO, SAVE_FILTER_INFO, GET_FILTER_INFO
    } from '@api/url'
    export default {
        components: {},
        props: {
            parameter: {
                type: Object,
                default () {
                    return {
                        status: '0',
                        unitId: '',
                        selectValue: '',
                        ctlUnit:''
                    }
                }
            }
        },
        data () {
            return {
                options: [],
                dialogVisible: false,
                oldValue: {},
                tableId: '',
                field: [],
                pageInfo: {
                    pageNo: 1,
                    pageSize: 5
                },
                nextPage: false,
                sqlColumn: [],
                selectedValue: []
            }
        },
        watch: {
            'selectedValue': 'deliverySelectValue'
        },
        methods: {
            getData (data) {
                if (data.selectedValue) {
                    this.selectedValue = data.selectedValue
                }
                if (data.field.length !== 0 && data.tableId != null) {
                    let conditions = {}
                    this.sqlColumn = data.field
                    this.tableId = data.tableId
                    /* // 暂时写死s
                     conditions.tableId = 'st3' */
                    conditions.tableId = this.tableId
                    conditions.sqlColumn = this.sqlColumn
                    conditions.pageNum = this.pageInfo.pageNo
                    conditions.pageSize = this.pageInfo.pageSize
                    ajax.post(GET_TABLEFILTER_INFO, conditions).then(res => {
                        if (res.data.nextPage !== 0) {
                            this.nextPage = true
                        } else {
                            this.nextPage = false
                        }
                        if (!data.next) {
                            this.options = []
                        }
                        for (let attr in res.data.list[0]) {
                            if (attr !== 'rowId') {
                                Array.prototype.push.apply(this.options, res.data.list[0][attr])
                            }
                        }
                    })
                }
            },

            deliverySelectValue () {
                this.$emit('selectValue', this.selectedValue)
            },
            confirm () {
                let conditions = {}
                let column = {}
                column['column'] = this.oldValue.column
                column['type'] = this.oldValue.type
                column['value'] = []
                column['tableId'] = this.oldValue.tableId
                column['value'] = this.selectedValue
                conditions['value'] = column
                conditions['optMode'] = 'U'
                conditions['unitId'] = this.parameter.unitId
                // 将对应图形组件的id传进去
                conditions['ctlUnit'] = this.parameter.ctlUnit
                ajax.post(SAVE_FILTER_INFO, conditions).then(res => {
                    this.$message.success('保存成功')
                    this.dialogVisible = false
                    this.$emit('successFlag')
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                })
            },
            ConfirmModification () {
                debugger
                let conditions = {}
                let column = {}
                column['column'] = this.oldValue.column
                column['type'] = this.oldValue.type
                column['value'] = []
                column['tableId'] = this.oldValue.tableId
                column['value'] = this.selectedValue
                conditions['value'] = column
                conditions['optMode'] = 'U'
                conditions['unitId'] = this.parameter.unitId
                ajax.post(SAVE_FILTER_INFO, conditions).then(res => {
                    this.$message.success('保存成功')
                    this.dialogVisible = false
                    this.$emit('successFlag')
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                })
            },
            // 根据unitId 查询组件信息
            getFilterInfo (data) {
                let $this = this
                ajax.post(GET_FILTER_INFO, {unitId: data}).then(res => {
                    if (res.data !== '') {
                        $this.oldValue = JSON.parse(res.data.value)
                        $this.tableId = $this.oldValue.tableId
                        $this.field = $this.oldValue.column
                        let data = {}
                        data.tableId = $this.tableId
                        data.field = $this.field

                        this.getData(data)
                    }
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                })
            },
            handleClick () {
                debugger
                this.pageInfo.pageNo = this.pageInfo.pageNo + 1
                let conditions = {}
                conditions.tableId = this.tableId
                conditions.field = this.sqlColumn
                conditions.next = true
                this.getData(conditions)
            }
        },
        mounted () {
            if (this.parameter.selectValue !== '') {
                const selectedValue = JSON.parse(this.parameter.selectValue).value
                // 多选下拉需要的是[]，接口默认会返回{}导致组件报错，这里要判断一下
                if(Array.isArray(selectedValue)){
                    this.selectedValue = selectedValue
                }
                // this.selectedValue=this.selectedValue[0]
            }
            if (this.parameter.status === '1') {
                // this.unitId='27252263747584'
                if (this.parameter.unitId !== '') {
                    this.getFilterInfo(this.parameter.unitId)
                }
            }
        },
        created () {

        }
    }
</script>

<style scoped>

</style>
